<template>
    <el-breadcrumb :separator-icon="ArrowRight" style="cursor: pointer; margin: 10px 0; display:inline-block; margin-left: 10px;">
        <el-breadcrumb-item :to="item.path" v-for="item in breadList" :key="item.id">
            <div class="container comFlex comFlexCenter comJustCenter">
                {{ item.meta.title }}
            </div>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue';

const route = useRoute();
const breadList = ref([]);

const getCurrentPath = () => {
    breadList.value = route.matched.filter(item => item.meta && item.meta.title);
};

onMounted(() => {
    getCurrentPath();
});

watch(route, (to) => {
    console.log('route', route)
    breadList.value = to.matched.filter(item => item.meta && item.meta.title);
}, { immediate: true });
</script>
<style scoped>
    .container{
        width: 126px;
        height: 41px;
        line-height: 20px;
        border-radius: 0px 5px 0px 0px;
        background-color: rgba(255,255,255,1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: center;
        font-family: -regular;
        border: 1px solid rgba(224,227,234,1);
    }
</style>